<template>
    <view class="changePwd">
        <text class="changePwd_title">设置新密码</text>
        <form>
            <view class="changePwd_form_wrap">
                <text>旧密码：</text>
                <input type="password" placeholder="请输入当前密码" v-model="oldPwd">
            </view>
            <view class="changePwd_form_wrap">
                <text>新密码：</text>
                <input type="password" placeholder="请设置新密码" v-model="newPwd">
            </view>
            <view class="changePwd_form_wrap">
                <text>确认密码：</text>
                <input type="password" placeholder="请再次输入新密码" v-model="newPwds">
            </view>
        </form>
        <text class="tips">密码长度6-12位，由字母数字_构成</text>
        <view class="btn">
            <button @click="confirm">确定</button>
        </view>
        
    </view>
</template>

<script  setup>
import { ref } from 'vue';
const oldPwd= ref()  //旧密码
const newPwd=ref()  //新密码
const newPwds =ref() //确认新密码



const confirm=()=>{
	
}

</script>
<style scoped lang="scss">
.changePwd {
    width: 100vw;
    height: 100vh;
    background-color: #f1f1f1;
    padding: 40px 16px;
    box-sizing: border-box;
}

.changePwd_title {
    width: 100%;
    font-size: 28px;
}


.changePwd_form_wrap {
    width: 100%;
    margin-top: 28px;
    margin-bottom: 18px;
    border-bottom: 1px solid #ccc;
    padding: 12px 0;

}

text {
    width: 80px;
    text-align: left;
}

input {
    margin-top: 12rpx;
    border: 0;
    background-color: #f1f1f1;
}

.tips {
    color: #666;
}

.btn {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 40rpx;

    button {
        width: 92%;
        height: 40px;
        border-radius: 4px;
        margin-top: 28px;
        color: #fff;
        background-color: #5677fc;
        border: 0;
    }
}

.err {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0px;
    line-height: 46px;
    background-color: #e65557;
    transition: all 0.5s;
    overflow: hidden;
    color: #fff;
    padding-left: 8px;
}

.errShow {
    height: 46px;
    transition: all 0.5s;
    z-index: 999999999;
}
</style>
